<template>
	<view style="width: 100%;height: 100%;">
		<view class="box" :style="[customStyle]">
			<view class="round1" :style="[customStyler]" v-if="showr"></view>
			<view class="round"  v-if="show" :style="[customStylerr]"></view>
	</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		text: {
			type: String,
		},
		isBlinking: {
			type: [Number, Boolean]
		},
		show: {
			type: Boolean,
			default: true
		},
		showr: {
			type: Boolean,
			default: true
		},
		customStyle: {
			type: Object,
			default () {
				return {}
			}
		},
		customStyler: {
			type: Object,
			default () {
				return {}
			}
		},
		customStylerr: {
			type: Object,
			default () {
				return {}
			}
		}
	});
</script>

<style lang="scss">
	.box{
		position: relative;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.round {
			position: absolute;
			width: 100%;
			height: 100%;
			background-color: #4caf50;
			opacity: 0.2;
			animation: round-animation 3s infinite;
		}
		
		.round1 {
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			background-color: #4caf50;
		}
	}
	@keyframes round-animation {
		0% {
			opacity: 0.2;
			filter: alpha(opacity=20);
			-webkit-transform: scale(1);
		}

		50% {
			opacity: 0.5;
			filter: alpha(opacity=50);
			-webkit-transform: scale(1.12);
		}

		100% {
			opacity: 0.2;
			filter: alpha(opacity=20);
			-webkit-transform: scale(1);
		}
	}
</style>